<script setup lang="ts">
  import { computed, ref, unref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { showToast } from 'vant';
  import API_BANNER from '@/apis/banner'

  const route = useRoute();
  const router = useRouter();

  onMounted(() => {

    getDetail()
  })
  const detailData = ref({})
  const getDetail = async () => {
    let res = await API_BANNER.contentDetail({
      id: route.query.id
    })
    if (res.code == 1) {
      detailData.value = res.data
    }
  }
</script>

<template>
  <div class="container">

    <div>
      <div class="leTit" v-for="i in detailData.ensure_label_text" :key="i">
        <span>{{i}} </span>
      </div>


      <div class="recommendBox" style="min-height: 70vh;">
        <div class="tit flex align-items jus-bet">
          <span class="h">{{detailData.title}}</span>
          <span style="line-height: 39px;">{{detailData.createtime}}</span>
        </div>
        <div style="color: #a7a7a7;">
          <span style="padding-right: 10px;" v-for="tag in detailData.content_label_text" :key="tag">{{tag}}</span>

        </div>
        <van-divider dashed :style="{ backgroundColor: '#c9c9c9'}"></van-divider>
        <div class="leTit">
          <span>产品介绍 </span>
        </div>
        <div v-html="detailData.introduce">
        </div>
      </div>

    </div>

    <getBack></getBack>
  </div>
</template>

<style lang="less" scoped>
  @import '@/styles/mixins/login.less';

  .container {
    padding: 20px;
    background: url("@/assets/img/serice.jpg")no-repeat;
    background-size: 100% 100%;

    .leTit {
      display: inline-block;
      background-color: #4d90fe;
      border-radius: 30px;
      padding: 4px 12px;
      color: #fff;
      margin-bottom: 10px;
      margin-right: 12px;
    }

    .service_tit {
      padding: 18px;
      background-color: #fff;
      border-radius: 12px;
    }

    .recommendBox {
      background-color: #fff;
      border-radius: 12px;
      padding: 16px;
      margin-top: 12px;

      .tit {
        margin: 10px 0;

        .h {
          font-size: 20px;
          font-weight: 800;
        }
      }
    }
  }
</style>